<%@ page contentType="text/html;charset=UTF-8" %>
<%//@include file="../../common/sessionValidate.jsp" %>
<%//@include file="../../common/taglibs.jsp" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML>
<html lang="UTF-8">
<head>
	<title>上传文件</title>
	<%//@ include file="meta.jsp"%>
	<!--  <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta http-equiv="X-UA-Compatible" content="IE=9">
  -->
	<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
	<link rel="stylesheet" href="<%=basePath%>css/my-bootstrap.css" media="screen" id="tuserskin">
	<link rel="stylesheet" href="<%=basePath%>css/font-awesome.min.css">
	<link href="<%= basePath %>images/upload/uploadify.css" rel="stylesheet" type="text/css">

</head>
<body>
<form id="uploadForm" method = "post" enctype="multipart/form-data">
	<!-- 由于使用了ssm框架，后台接收是用name绑定的，注意name和后台一致 -->
	<input type="file" id="file1" name="file1"/>
	<input type="button" onclick="UpladFile()"  value="上传"/>
</form>
<div class="progress" style="width: 90%">
	<div id="progressactive"
		 class="progress-bar progress-bar-striped active" role="progressbar"
		 aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"
		 style="width: 0%"></div>
</div>
<span id="sr-only"></span>


<div class="" style="margin-right:2px;padding-right:1px;">
	<!--------------------------部署面板  start------------------------------->
	<!--
    <form class="form-horizontal form-bordered form-row-strippe" name="form2"  mentod="post" enctype="multipart/form-data">
    <form action="" class="form-horizontal form-bordered form-row-strippe" name="form2" enctype="multipart/form-data" method="post" >
    -->
	<form name="form2" id="form2" enctype="multipart/form-data" method="post" target="frameFile">

		<!-- 查询面板 -->
		<div class="panel panel-primary" id="bsDiv1">
			<!-- Default panel contents -->
			<div class="panel-heading  ">
				<i class='icon-upload-alt'></i>&nbsp;上传文件
			</div>
			<div class="panel-body" id="bsDiv" class="panel-collapse collapse in">
				<!---->
				<div class="col-xs-8 col-sm-8  col-md-8 col-lg-8">
					<div class="form-group">

						<label class="control-label col-md-5">支持一次选择单文件上传：</label>
						<div class="col-md-7">
							<!--
                            <input type="file" name="file_upload" id="file_upload"/>
                           <a href="javascript:$('#file_upload').uploadify('upload','*')"><input type="button" id="buttonupload" value="开始上传"></a>
                           <a href="javascript:$('#file_upload').uploadify('cancel')"><input type="button" id="buttonqxupload" value="取消上传"></a>
                           <a href="javascript:window.close()"><input type="button" id="buttonqxupload" value="关闭"></a>
                              -->

							<input type="file" name="file1" id="file1"/>
							<button type="button" onclick="commitUpload()" class="btn btn-caution btn-big"
									rel="_request"><span><span>提交</span></span></button>&nbsp;&nbsp;&nbsp;&nbsp;
							<a href="javascript:window.close()"><input type="button" id="buttonqxupload" value="关闭"></a>

						</div>
					</div>
				</div>

			</div>
		</div>
	</form>

	<!--
            这个iframe拿到post过来的表单数据后会开始在自身内部访问post过来的页面地址,在内部中它会刷新页面，
            但是这已不重要了，因为当前的iframe已经被我display:none隐藏了！所以这样给用户看起来像是无刷新的
            页面文件上传，其实只是做一个一个小小的技巧！
     -->
	<iframe id='frameFile' name='frameFile' style='display: block; width: 200px; height:50px;'></iframe>

</div>
</body>
</html>

<script src="<%=basePath%>js/jquery-2.1.1.min.js" language="javascript"></script>
<script src="<%=basePath%>js/bootstrap.min.js"></script>
<script src="<%=basePath%>js/bootstrap-paginator.min.js"></script>
<script src="<%=basePath%>/js/respond.js"></script>
<script src="<%=basePath%>/js/html5.js"></script>
<script src="<%=basePath%>js/my-jquery-curd.js"></script>
<script src="<%= basePath %>js/tableSortTool.js"></script>
<script src="<%= basePath %>js/calendar.js"></script>
<script src="<%=basePath%>js/jquery.uploadify.min.js"></script>

<script type="text/javascript">
	function UpladFile() {
		// 获取页面已有的一个form表单
		var formObj = document.getElementById("uploadForm");
		var FileController = "<%=basePath%>upload/uploadOneFile?time=" + Math.random(); // 接收上传文件的后台地址
		// FormData 对象
		var form = new FormData(formObj);//创建一个form对象
		alert("FormData="+form.toString());
		// XMLHttpRequest 对象
		var xhr = new XMLHttpRequest();//创建XMLHttpRequest对象
		xhr.open("post", FileController, true);//打开连接，(访问类型，地址，是否异步)
		xhr.onload = function() {//请求完成后执行  里面可用
			if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
				alert(xhr.responseText);//后台返回的数据
			} else {
				alert("Request was unsuccessful: " + xhr.status);//状态
				//0	UNSENT (未打开),
				// 1	OPENED  (未发送),
				// 2 HEADERS_RECEIVED (已获取响应头),
				// 3	LOADING (正在下载响应体),
				// 4	DONE (请求完成)
			}
		};

		xhr.upload.addEventListener("progress", progressFunction, false);//添加上传监听器方法
		xhr.send(form);//发送请求
	}

	function progressFunction(evt) {

		var progressBar = document.getElementById("progressactive");//获取进度条对象
		var percentageDiv = document.getElementById("sr-only");//获取展示进度数据对象
		if (evt.lengthComputable) {
			var max = evt.total;//文件总大小
			var loaded = evt.loaded;//已上传文件大小
			console.log(max);
			progressBar.style.width = Math.round(loaded / max * 100) + "%";
			percentageDiv.innerHTML = Math.round(loaded / max * 100) + "%";
			if (evt.loaded == evt.total) {
				percentageDiv.innerHTML = "上传完成";
			}
		}
	}


	function commitUpload() {
		//alert("dddddddddd");
		//$("#addSaveButton").attr("disabled", true);
		//if(check()){
		var url = "<%=basePath%>upload/uploadOneFile?time=" + Math.random();
		var postData = $("#form2").serializeArray();
		//var formData = new FormData($( "#ffAdd" )[0]);
		alert(postData);
		var a = confirm("您确认上传该文件信息？");
		if (a == true) {
			form2.action = url;
			form2.submit();

			/*
            //alert(postData);
            $.post(url, postData, function (data) {
                //var data = $.parseJSON(data);
                if (data.result == "success") {
                    alert("data.info=" + data.info);
                    //先清空老值，再写进新值；
                    var pw_id = "
<%= request.getParameter("pw_id")%>";
                    if (pw_id != null) {
                        window.opener.document.getElementById('
            <%= request.getParameter("pw_id")%>').value = "";
                        window.opener.document.getElementById('
            <%= request.getParameter("pw_id")%>').value = data.info;
                    }

                    //保存成功  1.关闭弹出层，
                    alert("恭喜上传成功!");
                    //history.goBack();
                } else {
                    alert("上传数据失败!");
                    return false;
                }
            }).error(function () {
                showErrorTips("上传数据失败!");
            });
            */
			//alert("上传成功！");
		}
	}

</script>
